<template>
  <el-dialog
    :modal="false"
    v-dialogDrag
    :close-on-click-modal="false"
    :title="params.warning?'预警值重置':'设备重置'"
    :visible.sync="isShowDialog"
    width="500px">
    <!-- 具体form表单 -->
    <div class="info">{{params.title}}</div>
    <el-form label-position="right" ref="form" :model="params" label-width="100px"
             class="form_width-200">
      <el-form-item :label="params.warning?'预警基准值：':'相对值：'" prop="mark">
        <el-input v-model="params.value" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitMark">确定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {cleanInitVal, resetWarning} from '@/services/model/project-info'

export default {
  data() {
    return {
      // 是否展示弹窗
      isShowDialog: false,
      // 当前表单数据
      params: {}
    }
  },
  methods: {
    show(params) {
      this.params = params
      this.isShowDialog = true
    },
    clearValidate() {
      this.isShowDialog = false
    },
    // 说明
    async submitMark() {
      const action = this.params.warning ? resetWarning : cleanInitVal
      await action(this.params)
      this.$message.success(this.params.warning?'重置预警基础值成功':'重置基础值成功')
      this.$emit('update')
      this.isShowDialog = false
    },
  }
}
</script>

<style scoped>
  .info {
    font-size: 13px;
    color: #1990FE;
    text-align: center;
    padding: 10px;
  }

  /*// 覆盖层元素增加可穿透点击事件*/
  .el-dialog__wrapper {
    pointer-events: none;
  }

  /*// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）*/
  .el-dialog {
    pointer-events: auto;
  }
</style>
